<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./static/base.css">
    <style>
        html, body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .demo{
            border: 1px solid #000;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }
        html{
            width: 100%;
            height: 100%;
            margin: 0;
            background: url(./static/images/1.png) no-repeat;
            background-size: 100% 100%;
        }
        body{
            margin: 0;
        }
        /*.apps{
            float: left;
        }*/
        .apps th::before{
            content: '';
            width: 112px;
            height: 0;
        }
        .apps td{
            padding-bottom: 10px;
            width: 112px;
            height: 124px;
            text-align: left;
            vertical-align: top;
        }
        .apps td:empty::after{
            content: "";
            display: block;
            width: 112px;
            height: 124px;
        }
        .app{
            font-size: 12px;
            display: block;
            padding: 10px;
            margin: 2px;
            width: 60px;
            max-height: 100px;
            color: #fff;
            text-align: center;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            margin-left: 30px;
            cursor: pointer;
            text-shadow: 1px 1px .4px #000000;
        }
        .app:hover{
            outline: 1px solid rgba(178, 178, 180, 0.4);
            border-radius: 2px;
            background: rgba(200, 200, 200, 0.2);
        }
        .app img{
            width: 60px;
            height: 60px;
            display: block;
            margin-bottom: 0.3em;
        }
        textarea{
            resize: none;
        }
        .actionmenu{
            position: fixed;
            margin: 0;
            bottom: 0;
            width: 100%;
            height: 46px;
            background-color: rgba(255, 255, 255, 0.8);
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }
        .icon{
            display: inline-block;
            width: 20px;
            height: 20px;
            padding: 13px;
            margin-left: 5px;
        }
        .actionmenu>.icon{
            display: block;
            float: left;
            cursor: pointer;
        }
        .icon:not(.icon-open-active):hover{
            background-color: rgba(255, 255, 255, 0.5);
        }
        .icon2:hover{
            background-color: rgba(255, 255, 255, 0.4);
        }
        #winIcon{
            background: url(./static/images/5.png) no-repeat;
            background-size: 100% 100%;
            background-origin: content-box;
            margin-left: 0;
        }
        #winIcon:hover{
            background-color: #fff;
            background-image: url(./static/images/6.png);
        }
        .start{
            display: none;
            position: fixed;
            bottom: 50px;
            width: 400px;
            height: 500px;
            padding: 10px;
            background-color: rgb(189, 189, 189);
            z-index: 100;
        }
        #dateText{
            display: block;
            padding: 13px;
        }
        .side{
            width: 460px;
            height: calc(100% - 52px);
            border-style: none;
            overflow: hidden;
            position: fixed;
            right: 0;
            top: 0;
        }
        #dateText:hover{
            background-color: rgba(0, 0, 0, 0.2);
        }
        .icon-open{
            border-bottom: 4px solid aqua;
            padding-bottom: 9px;
        }
        .icon-open-active{
            background-color: #fff;
        }
        .frames{
            width: 100%;
            height: calc(100% - 52px);
        }
        .title{
            display: block;
            float: left;
            width: 150px;
            height: 1.3em;
            padding-left: 0.2em;
            overflow: hidden;
            word-break: keep-all;
            white-space: nowrap;
        }
        .ico{
            display: block;
            float: left;
        }
        .demo iframe{
            display: block;
            width: calc(100% - 4px*2);
            height: calc(100% - (22px + 8px*2) - 4px*2);
            border: none;
            outline: none;
            overflow: scroll;
            box-sizing: border-box;
            margin: 4px;
        }
        .demo .telem{
            width: calc(100% - 16px);
            height: 22px;
            padding: 8px;
            line-height: 22px;
            background-color: #7fffd4;
            user-select: none;
            -webkit-user-select: none;
            overflow: hidden;
        }
        .icon2{
            display: block;
            float: right;
            width: 16px;
            height: 16px;
            padding: 3px;
        }
    </style>
    <script src="static/jquery-3.5.0.min.js"></script>
</head>
<body>
    <!-- Define: Apps -->
    
    <table class="apps">
        <tbody id="apps"></tbody>
    </table>


    <div id="window" style="display: none;">
        <div class="telem">
            <img style="width:16px;height:16px;" src alt="" draggable="false" class="ico" />
            <span class="title"></span>
            <img class="icon icon2 icon-close" draggable="false" src="./static/images/11.png"/>
            <img class="icon icon2 icon-full" draggable="false" src="./static/images/9.png"/>
            <img class="icon icon2 icon-small" draggable="false" src="./static/images/13.png"/>
        </div>
    </div>
    
    <div class="actionmenu" id="actionmenu">
        <div class="fr"><span id="dateText"></span></div>
        <span id="winIcon" class="icon"></span>
        <img src="static/images/4.png" alt="baidu" class="icon" draggable="false" />
    </div>
    
    <div class="start" id="start">
        <button onclick="if(confirm('确定要关机吗？')){window.opener = null; window.close(); }">关机</button>
    </div>
    <iframe src="./static/images/calendar.png.html" class="side"></iframe>
    <script>
        /* smoothRemove(元素) ：以动画方式删除该元素 */
        window.smoothRemove = function(elem){
            $(elem).animate({ width: '1px' }, 100, function(){elem.remove()});
        };


        window.dblClickApp = function(e){
            //debugger;
            console.log("dblclick");
            var et = $(e.target).closest(".input");
            console.log(et);
            if(et){
                var i = $(document.createElement("input"));
                i.attr("type", 'text');
                i.val(et.html());
                i.css({width:"100%",background:"#ffffff",border:"1px solid #ccc",
                        outline:"none",color:"#000000",fontFamliy:"宋体",fontWeight:"bold", width: '60px', height: '20px', overflow: 'visible', overflowWrap: "break-word", whiteSpace: "pre-wrap", transform: "translate(-40%, 0)"});
                //et.html("");
                //et.replaceWith(i);//双击修改文字
                i.css({position: "fixed", left: et.offset().left + 'px', top: et.offset().top + 'px'});
                $("body").append(i);
                i.focus();
                i.on("blur",function(){
                    et.html(i.val().replace("\n",""));//文件名没有换行符
                    i.remove();
                });
            }
        }
    
        var start = false;
        function changeStart (s){
            $("#start").css("display", (start ? "none" : "block"));
            start = s;
        }
        $("#winIcon").on("click", function(){changeStart(!start)});
    
        function settime (){
            var now = new Date();/*
            var deg1 = now.getHours() / 12 * 360;
            var deg2 = now.getMinutes() / 60 * 360;
            var deg3 = now.getSeconds() / 60 * 360;
            $("#hour").css("transform", "rotate(" + deg1 + "deg)");
            $("#minute").css("transform", "rotate(" + deg2 + "deg)");
            $("#second").css("transform", "rotate(" + deg3 + "deg)");*/
            $("#dateText").text(now.toLocaleString());
            setTimeout(settime, 500);
        }
        $(document).ready(settime);
        var x = false;
        function changeSidebar (s){
            $(".side").css("visibility", (s ? "visible" : "hidden"));
            x = s;
        }
        changeSidebar(false);
        $("#dateText").on("click", function(){changeSidebar(!x)});
        $(document.documentElement).on("click", function(e){
            if((!e.target.closest('.side')) && (!e.target.closest('#dateText')) && x) changeSidebar(false);
            if((!e.target.closest('#start')) && (!e.target.closest('#winIcon')) && start) changeStart(false);
        });
    </script>
</body>
</html>